deathnotefandomcom-20200223-history
User blog:KylaraE/Portable Infoboxes - Styling Preview
By making use of the user-specific CSS customization available by editing User:username/custom.css, I've begun working on creating style themes for the new infobox markup. I've been playing with a few ideas and styles, which I'm putting up here for previewing. As mentioned before, I can style the new infoboxes to look like the classic ones currently in use. If we're interested in a seamless, unnoticeable transition, this is an option. Another option is that we can make some changes. The more I consider the possibilities and look through other documentation and designs, the more I'm inspired to update our infobox design. Previews Below is a preview/comparison of the templates. The first image contains side-by-side comparisons of the human template. The first version is of the classic infobox currently in use, and the second one is the new infobox markup styled to look similar to the classic. Additionally, the final three are also the new infobox, but styled differently: one in red (the same red as the human template), another in blue, and one in red again with a black background (just to try something different). The second image contains previews of the human template again with some collapsed sections, and the soundtrack template using a yellow theme (to correspond with the yellow color theme used in the current music infoboxes). Infobox-preview-side-by-side.png|human template comparison with current classic, new-styled-as-classic, and new styles (red, blue, and red/black) Infobox-preview-2.png|more previews with collapsed sections, and soundtrack preview (yellow theme) New style features I would like to move forward with the new style. It has a couple things about it that would be improvements: * Improved readability - Text is dark on a lighter background. (Alternatively, light text on a dark background, but the link would need to be lightened as well.) The current infoboxes have dark text with colored backgrounds, some of which are a bit dark as well, which can be more difficult to read, especially for people with poorer eyesight. * Smoother look - The labels (text on the left) share the same background as the values (text on the right), which makes the infobox smoother. The current infoboxes switch the labels and values distinctly, with light-text/dark-background for labels and the opposite for the values. Giving them both the same background makes for a smoother and sleeker design. Additionally: * Better space management - Despite adding more fields, the new styles take up less space than the current infobox. It does this without sacrificing readability or clarity, with the text remaining the same size and each label/value set keeping distinct from the next. * The new styles can also maintain the color themes that are currently in use, such as the red used for humans, the yellow used for songs, and so forth. A few infobox features of note in the previews Additional neat things about the new infobox: * Galleries for the top image. I put several pictures of Light in there to show his different versions, and there's room for more. Ideally these could hold an image for every incarnation of the character (manga, anime, film, etc.) * Collapsible sections. They all currently load open by default, but if there's concern about page real estate, some of them can be set to load collapsed. * Check out the stats section on this one. I've reformatted "Other Attribute" so that it can now be defined. Instead of "Other Attribute: Acting Skills: 10/10", it's now just "Acting Skills: 10/10". (It will default to "Other Attribute" if left blank, for smooth implementation.) Also of note: * I've added more fields to the new human infobox to incorporate more recent adaptations (Musical, TV drama, upcoming American film). * All current field names still work in the new version, so implementation will be smooth without editing individual pages. * The new human infobox can also replace the templates for Template:Human2 and Template:Human3 due to the way grouped sections automatically display/hide. (The only secondary human infobox would be the one for book/film-only characters, Template:Human4, since they're organized a little differently.) Existing Color Themes These are the color themes that I'm aware of, so these are the themes I'll be mirroring. That's pretty much it at the moment. I'll continue updating the infoboxes and styling themes to prepare for implementation. If there are any concerns, especially regarding the themes/styles, readability, or display, please bring them up so we can address them or fix any problems. And onward~ Category:Blog posts